<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://10.35.164.246/allPage/css/reset.css">
    <link rel="stylesheet" href="http://10.35.164.246/allPage/css/list_1.css">

    </style>

</head>

<body>
    <header>
        <div class="head">
            <h1 class="logo">
            </h1>
            <ul class="list">
                <li>
                    <a href="http://10.35.164.246/allPage/index.html">网站首页</a>
                </li>
                <li>
                    <a href="">传悦资源</a>
                </li>
                <li class="active">
                    <a href="">传悦案例</a>
                </li>
                <li>
                    <a href="http://10.35.164.246/allPage/list_2.html">
                        解决方案
                    </a>
                </li>
                <li>
                    <a href="">需求提交</a>
                </li>
            </ul>
            <ul class="photo">
                <li class="first">
                    0535-60652189
                </li>
                <li>
                    <img src="http://10.35.164.246/img/love_03.jpg" alt="">
                </li>
                <li>
                    <img src="http://10.35.164.246/img/love_05.jpg" alt="">
                </li>
                <li>
                    <img src="http://10.35.164.246/img/love_07.jpg" alt="">
                </li>
                <li>
                    <img src="http://10.35.164.246/img/love_09.png" alt="">
                </li>
            </ul>
        </div>

    </header>
    <div class="banner">
        <div class="nav">
            <div class="nav-con">
                <span>
                    <a href=""> 网站首页</a>
                </span>
                <span>&gt;</span>
                <span>
                    <a href=""> 传悦案例</a>              
                </span>
            </div>
        </div>
    </div>

    <section>
        <div class="title">
            <ul class="title-top">
                <li>
                    <a href="#" class="focus">全部</a>
                </li>
                <li>
                    <a href="#">网站建设</a>
                </li>
                <li>
                    <a href="#">推广运营</a>
                </li>
                <li>
                    <a href="#">品牌策划</a>
                </li>
                <li>
                    <a href="#">网络全案</a>
                </li>
            </ul>
        </div>

        <ul class="item">
            <li id="temp">
                <!-- http://10.35.164.246/allPage/details_1.html -->
                <a href="">
                    <img src="" alt="" class="img ">
                    <h2 class="bool "></h2>
                    <span></span>
                    <p class="text "></p>
                </a>
            </li>
        </ul>

    </section>

    <div class="switch ">
        <ul class="tabSwtich ">
            <li>
                <a href="# ">&lt;</a>
            </li>
            <li>
                <a href="# ">1</a>
            </li>
            <li>
                <a href="# " class="focus ">2</a>
            </li>
            <li>
                <a href="# ">3</a>
            </li>
            <li>
                <a href="# ">4</a>
            </li>
            <li>
                <a href="# ">&gt;</a>
            </li>
        </ul>
    </div>

    <footer>
        <div class="content ">
            <div class="left ">
                <a href="# ">
                    <img src="http://10.35.164.246/img/logo-dm_03.jpg " />
                </a>
            </div>
            <div class="right ">
                <ul>
                    <li><a href="# ">关于传悦</a></li>
                    <li><a href="# ">新闻动态</a></li>
                    <li><a href="# ">传悦观点</a></li>
                    <li><a href="# ">联系传悦</a></li>
                    <li><a href="# ">加入传悦</a></li>
                    <li><a href="# ">付费账户</a></li>
                </ul>
                <p>
                    Copyright ©2013 创梦网络科技有限责任公司 ‖ 传悦 Chnyoo.cn All Rights Reserved 京ICP备12005221号
                </p>
            </div>
        </div>
    </footer>

    <script>
        //对获取参数的操作进行一系列封装
        function $(selector) {
            let result = document.querySelectorAll(selector);
            if (result.length === 1) {
                return result[0];
            } else {
                return result;
            }
        }
        let http = new XMLHttpRequest();

        http.open("get", "http://10.35.164.246:81/listCase");

        http.send();

        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                //对后端传送的数据进行正解析
                let dataList = JSON.parse(http.responseText);

                //动态生成数据
                dataList.forEach(function(item) {

                    let newItem = $("#temp ").cloneNode(true);
                    newItem.id = " ";
                    $("section .item ").appendChild(newItem);

                    newItem.querySelector(".img ").setAttribute("src", item.img);

                    newItem.querySelector(".bool ").innerHTML = item.h2;

                    newItem.querySelector(".text ").innerHTML = item.p;


                    newItem.setAttribute("data-id", item.id);
                    // let id = newItem.getAttribute("data-id");
                    newItem.querySelector("a").href = `details_1.html?id=${item.id}`;

                });

            }
        }
    </script>

</body>

</html>